<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI智能客群获取工具箱 | 全球B2B精准营销助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-icons@0.292.0/dist/umd/lucide-icons.min.js">
    <script src="https://cdn.jsdelivr.net/npm/lucide@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
</head>
<body class="bg-white text-gray-900 min-h-screen flex flex-col">
    <!-- Prevent zooming on the webpage -->
    <script>
        window.addEventListener("wheel", (e)=> {
          const isPinching = e.ctrlKey
          if(isPinching) e.preventDefault()
        }, { passive: false })
    </script>

    <!-- Header -->
    <header class="border-b border-gray-200">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-black">
                    <path d="M20 5C11.729 5 5 11.729 5 20C5 28.271 11.729 35 20 35C28.271 35 35 28.271 35 20C35 11.729 28.271 5 20 5ZM20 7.5C26.893 7.5 32.5 13.107 32.5 20C32.5 26.893 26.893 32.5 20 32.5C13.107 32.5 7.5 26.893 7.5 20C7.5 13.107 13.107 7.5 20 7.5Z" fill="currentColor"/>
                    <path d="M20 10C14.486 10 10 14.486 10 20C10 25.514 14.486 30 20 30C25.514 30 30 25.514 30 20C30 14.486 25.514 10 20 10ZM20 12.5C24.142 12.5 27.5 15.858 27.5 20C27.5 24.142 24.142 27.5 20 27.5C15.858 27.5 12.5 24.142 12.5 20C12.5 15.858 15.858 12.5 20 12.5Z" fill="currentColor"/>
                    <path d="M20 15C17.243 15 15 17.243 15 20C15 22.757 17.243 25 20 25C22.757 25 25 22.757 25 20C25 17.243 22.757 15 20 15ZM20 17.5C21.381 17.5 22.5 18.619 22.5 20C22.5 21.381 21.381 22.5 20 22.5C18.619 22.5 17.5 21.381 17.5 20C17.5 18.619 18.619 17.5 20 17.5Z" fill="currentColor"/>
                    <circle cx="20" cy="20" r="2.5" fill="currentColor"/>
                </svg>
                <h1 class="text-xl font-bold">全球客户获取工具箱</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="helpButton" class="text-gray-600 hover:text-black">
                    <i data-lucide="help-circle" class="w-5 h-5"></i>
                </button>
                <button id="settingsButton" class="text-gray-600 hover:text-black">
                    <i data-lucide="settings" class="w-5 h-5"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <div class="mb-8">
            <h2 class="text-2xl font-bold mb-2">精准获取海外B2B潜在客户</h2>
            <p class="text-gray-600">借助AI营销智能体技术，构建市场销售线上虚拟团队，链接Google、Facebook、LinkedIn等全球媒体生态</p>
        </div>

        <!-- Multi-step form -->
        <div class="bg-gray-50 rounded-lg border border-gray-200 p-6 mb-8">
            <div class="mb-6">
                <div class="flex">
                    <div class="steps-container flex items-center w-full mb-6">
                        <div class="step-item active flex flex-col items-center" data-step="1">
                            <div class="step-circle w-8 h-8 rounded-full flex items-center justify-center border bg-black text-white">1</div>
                            <span class="text-sm mt-2">业务配置</span>
                        </div>
                        <div class="step-line flex-grow h-[1px] bg-gray-200 mx-2"></div>
                        <div class="step-item flex flex-col items-center" data-step="2">
                            <div class="step-circle w-8 h-8 rounded-full flex items-center justify-center border border-gray-300 text-gray-500">2</div>
                            <span class="text-sm mt-2">目标市场</span>
                        </div>
                        <div class="step-line flex-grow h-[1px] bg-gray-200 mx-2"></div>
                        <div class="step-item flex flex-col items-center" data-step="3">
                            <div class="step-circle w-8 h-8 rounded-full flex items-center justify-center border border-gray-300 text-gray-500">3</div>
                            <span class="text-sm mt-2">客户画像</span>
                        </div>
                        <div class="step-line flex-grow h-[1px] bg-gray-200 mx-2"></div>
                        <div class="step-item flex flex-col items-center" data-step="4">
                            <div class="step-circle w-8 h-8 rounded-full flex items-center justify-center border border-gray-300 text-gray-500">4</div>
                            <span class="text-sm mt-2">搜索策略</span>
                        </div>
                        <div class="step-line flex-grow h-[1px] bg-gray-200 mx-2"></div>
                        <div class="step-item flex flex-col items-center" data-step="5">
                            <div class="step-circle w-8 h-8 rounded-full flex items-center justify-center border border-gray-300 text-gray-500">5</div>
                            <span class="text-sm mt-2">结果导出</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 1: Business Configuration -->
            <div class="step-content" id="step-1">
                <h3 class="text-xl font-bold mb-4">业务配置</h3>
                <p class="mb-6 text-gray-600">设定您的业务目标和核心产品/服务信息</p>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">业务目标</label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="business-goal-card border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-black transition-colors">
                            <i data-lucide="line-chart" class="w-6 h-6 mb-2"></i>
                            <h4 class="font-medium">销售增长</h4>
                            <p class="text-sm text-gray-600 mt-1">增加销售额和市场份额</p>
                        </div>
                        <div class="business-goal-card border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-black transition-colors">
                            <i data-lucide="globe" class="w-6 h-6 mb-2"></i>
                            <h4 class="font-medium">市场拓展</h4>
                            <p class="text-sm text-gray-600 mt-1">进入新的地区或行业市场</p>
                        </div>
                        <div class="business-goal-card border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-black transition-colors">
                            <i data-lucide="badge" class="w-6 h-6 mb-2"></i>
                            <h4 class="font-medium">品牌建设</h4>
                            <p class="text-sm text-gray-600 mt-1">提升品牌知名度和影响力</p>
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="companyName" class="block text-sm font-medium text-gray-700 mb-1">公司名称</label>
                        <input type="text" id="companyName" class="form-input block w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border" placeholder="您的公司名称">
                    </div>
                    <div>
                        <label for="industry" class="block text-sm font-medium text-gray-700 mb-1">所属行业</label>
                        <select id="industry" class="form-select block w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border">
                            <option value="" disabled selected>选择行业</option>
                            <option value="manufacturing">制造业</option>
                            <option value="electronics">电子科技</option>
                            <option value="medical">医疗器械</option>
                            <option value="chemicals">化工材料</option>
                            <option value="automotive">汽车配件</option>
                            <option value="textiles">纺织服装</option>
                            <option value="furniture">家具家居</option>
                            <option value="food">食品饮料</option>
                            <option value="cosmetics">化妆品/个护</option>
                            <option value="other">其他行业</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-6">
                    <label for="products" class="block text-sm font-medium text-gray-700 mb-1">核心产品/服务</label>
                    <textarea id="products" rows="3" class="form-textarea block w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border" placeholder="描述您的主要产品或服务，以及其核心优势..."></textarea>
                </div>
                
                <div class="flex justify-end mt-8">
                    <button id="step1Next" class="px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors">下一步</button>
                </div>
            </div>
            
            <!-- Step 2: Target Market -->
            <div class="step-content hidden" id="step-2">
                <h3 class="text-xl font-bold mb-4">目标市场</h3>
                <p class="mb-6 text-gray-600">选择您想要开拓的海外市场区域</p>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">目标地区（可多选）</label>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                        <div class="region-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="region-northamerica" class="region-checkbox h-4 w-4 mr-2">
                                <label for="region-northamerica" class="cursor-pointer">北美地区</label>
                            </div>
                        </div>
                        <div class="region-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="region-europe" class="region-checkbox h-4 w-4 mr-2">
                                <label for="region-europe" class="cursor-pointer">欧洲地区</label>
                            </div>
                        </div>
                        <div class="region-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="region-asia" class="region-checkbox h-4 w-4 mr-2">
                                <label for="region-asia" class="cursor-pointer">亚洲地区</label>
                            </div>
                        </div>
                        <div class="region-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="region-oceania" class="region-checkbox h-4 w-4 mr-2">
                                <label for="region-oceania" class="cursor-pointer">大洋洲</label>
                            </div>
                        </div>
                        <div class="region-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="region-middleeast" class="region-checkbox h-4 w-4 mr-2">
                                <label for="region-middleeast" class="cursor-pointer">中东地区</label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="countries-container" class="mb-6 hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-3">具体国家（可多选）</label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3" id="countries-grid">
                        <!-- Dynamically populated based on regions selected -->
                    </div>
                </div>
                
                <div class="mt-6">
                    <label for="marketGoal" class="block text-sm font-medium text-gray-700 mb-1">市场进入目标</label>
                    <select id="marketGoal" class="form-select block w-full md:w-1/2 rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border">
                        <option value="new_market">开拓全新市场</option>
                        <option value="expand_existing">扩大现有市场份额</option>
                        <option value="find_partners">寻找当地合作伙伴/代理商</option>
                        <option value="competitor_analysis">竞争对手分析</option>
                    </select>
                </div>
                
                <div class="flex justify-between mt-8">
                    <button id="step2Prev" class="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">上一步</button>
                    <button id="step2Next" class="px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors">下一步</button>
                </div>
            </div>
            
            <!-- Step 3: Customer Persona -->
            <div class="step-content hidden" id="step-3">
                <h3 class="text-xl font-bold mb-4">客户画像</h3>
                <p class="mb-6 text-gray-600">定义您理想的潜在客户特征</p>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="companySize" class="block text-sm font-medium text-gray-700 mb-1">目标公司规模</label>
                        <select id="companySize" class="form-select block w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border">
                            <option value="any">不限</option>
                            <option value="small">小型企业 (1-50名员工)</option>
                            <option value="medium">中型企业 (51-500名员工)</option>
                            <option value="large">大型企业 (501-1000名员工)</option>
                            <option value="enterprise">超大型企业 (1000+名员工)</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="businessType" class="block text-sm font-medium text-gray-700 mb-1">业务类型</label>
                        <select id="businessType" class="form-select block w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border">
                            <option value="manufacturer">制造商</option>
                            <option value="distributor">批发商/分销商</option>
                            <option value="retailer">零售商</option>
                            <option value="service">服务提供商</option>
                            <option value="any">不限</option>
                        </select>
                    </div>
                </div>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">目标决策者职位（可多选）</label>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <div class="position-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="position-ceo" class="position-checkbox h-4 w-4 mr-2">
                                <label for="position-ceo" class="cursor-pointer">CEO/总经理</label>
                            </div>
                        </div>
                        <div class="position-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="position-cto" class="position-checkbox h-4 w-4 mr-2">
                                <label for="position-cto" class="cursor-pointer">CTO/技术总监</label>
                            </div>
                        </div>
                        <div class="position-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="position-purchasing" class="position-checkbox h-4 w-4 mr-2">
                                <label for="position-purchasing" class="cursor-pointer">采购总监/经理</label>
                            </div>
                        </div>
                        <div class="position-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="position-operations" class="position-checkbox h-4 w-4 mr-2">
                                <label for="position-operations" class="cursor-pointer">运营总监/经理</label>
                            </div>
                        </div>
                        <div class="position-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="position-marketing" class="position-checkbox h-4 w-4 mr-2">
                                <label for="position-marketing" class="cursor-pointer">市场总监/经理</label>
                            </div>
                        </div>
                        <div class="position-card border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center">
                                <input type="checkbox" id="position-other" class="position-checkbox h-4 w-4 mr-2">
                                <label for="position-other" class="cursor-pointer">其他职位</label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <label for="keywordsTags" class="block text-sm font-medium text-gray-700 mb-1">关键词标签（用英文逗号分隔）</label>
                    <div class="relative">
                        <input type="text" id="keywordsTags" class="form-input block w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-2 border" placeholder="例如: industrial automation, cnc machining, medical devices">
                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm">使用英文输入效果更佳</div>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">这些关键词将用于构建搜索策略，找到与您业务最相关的潜在客户</p>
                </div>
                
                <div class="flex justify-between mt-8">
                    <button id="step3Prev" class="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">上一步</button>
                    <button id="step3Next" class="px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors">下一步</button>
                </div>
            </div>
            
            <!-- Step 4: Search Strategy -->
            <div class="step-content hidden" id="step-4">
                <h3 class="text-xl font-bold mb-4">搜索策略</h3>
                <p class="mb-6 text-gray-600">配置多平台搜索策略，链接全球媒体生态</p>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">选择搜索平台（可多选）</label>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="platform-card border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center mb-3">
                                <input type="checkbox" id="platform-linkedin" class="platform-checkbox h-4 w-4 mr-2" checked>
                                <label for="platform-linkedin" class="cursor-pointer font-medium">LinkedIn</label>
                            </div>
                            <p class="text-sm text-gray-600">专业社交网络，适合B2B决策者定位</p>
                        </div>
                        <div class="platform-card border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center mb-3">
                                <input type="checkbox" id="platform-google" class="platform-checkbox h-4 w-4 mr-2" checked>
                                <label for="platform-google" class="cursor-pointer font-medium">Google</label>
                            </div>
                            <p class="text-sm text-gray-600">通过高级搜索技术定位潜在客户</p>
                        </div>
                        <div class="platform-card border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-black transition-colors">
                            <div class="flex items-center mb-3">
                                <input type="checkbox" id="platform-facebook" class="platform-checkbox h-4 w-4 mr-2">
                                <label for="platform-facebook" class="cursor-pointer font-medium">Facebook/Meta</label>
                            </div>
                            <p class="text-sm text-gray-600">通过行业相关专业群组识别决策者</p>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6">
                    <div class="bg-gray-100 p-4 rounded-lg">
                        <label class="block text-sm font-medium text-gray-700 mb-3">AI生成的搜索策略</label>
                        <div id="search-strategy-container" class="space-y-4">
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <h4 class="font-medium mb-2"><i data-lucide="linkedin" class="w-4 h-4 inline-block mr-1"></i> LinkedIn搜索策略</h4>
                                <div class="text-sm text-gray-800" id="linkedin-strategy">
                                    <p class="italic text-gray-500">正在根据您的信息生成策略...</p>
                                </div>
                            </div>
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <h4 class="font-medium mb-2"><i data-lucide="search" class="w-4 h-4 inline-block mr-1"></i> Google搜索策略</h4>
                                <div class="text-sm text-gray-800" id="google-strategy">
                                    <p class="italic text-gray-500">正在根据您的信息生成策略...</p>
                                </div>
                            </div>
                            <div class="bg-white p-4 rounded-lg border border-gray-200" id="facebook-strategy-card">
                                <h4 class="font-medium mb-2"><i data-lucide="facebook" class="w-4 h-4 inline-block mr-1"></i> Facebook/Meta搜索策略</h4>
                                <div class="text-sm text-gray-800" id="facebook-strategy">
                                    <p class="italic text-gray-500">选择Facebook作为平台后生成策略...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">搜索数量设置</label>
                    <div class="flex items-center">
                        <input type="range" id="searchVolume" min="10" max="100" step="10" value="20" class="w-48 mr-3">
                        <span id="searchVolumeValue" class="font-medium">20个潜在客户</span>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">设置希望获取的潜在客户数量，数量越大搜索时间越长</p>
                </div>
                
                <div class="flex justify-between mt-8">
                    <button id="step4Prev" class="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">上一步</button>
                    <button id="step4Next" class="px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors">开始搜索</button>
                </div>
            </div>
            
            <!-- Step 5: Results Export -->
            <div class="step-content hidden" id="step-5">
                <h3 class="text-xl font-bold mb-4">AI搜索结果</h3>
                <p class="mb-4 text-gray-600">已为您生成精准潜在客户清单，可查看详情并导出</p>
                
                <div class="mb-6" id="loading-results">
                    <div class="flex flex-col items-center justify-center py-8">
                        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-black mb-4"></div>
                        <p class="text-gray-600">AI正在收集客户信息，请稍候...</p>
                        <p class="text-sm text-gray-500 mt-2"><span id="progress-percentage">0%</span> 完成</p>
                        <div class="w-64 bg-gray-200 rounded-full h-2.5 mt-3">
                            <div class="bg-black h-2.5 rounded-full" id="progress-bar" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
                
                <div class="mb-6 hidden" id="results-container">
                    <div class="bg-gray-50 p-4 rounded-lg mb-4 flex justify-between items-center">
                        <div>
                            <span class="font-medium">搜索结果: </span>
                            <span id="results-count" class="font-bold">20</span> 个潜在客户
                        </div>
                        <div class="flex items-center">
                            <div class="mr-2">
                                <select id="sortResults" class="form-select text-sm rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black p-1 border">
                                    <option value="relevance">按相关度排序</option>
                                    <option value="company">按公司名称排序</option>
                                    <option value="country">按国家/地区排序</option>
                                </select>
                            </div>
                            <button id="exportCsv" class="flex items-center px-3 py-1.5 bg-black text-white text-sm rounded-md hover:bg-gray-800 transition-colors">
                                <i data-lucide="download" class="w-4 h-4 mr-1"></i> 导出CSV
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white border border-gray-200">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司名称</th>
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">国家/地区</th>
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">行业</th>
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">规模</th>
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系人</th>
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">相关度</th>
                                    <th class="py-3 px-4 border-b text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody id="results-table-body">
                                <!-- Results will be populated here -->
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Customer Detail Modal -->
                <div id="customer-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                    <div class="bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
                        <div class="p-6 border-b border-gray-200">
                            <div class="flex justify-between items-center">
                                <h3 class="text-xl font-bold" id="modal-company-name">公司详情</h3>
                                <button id="close-modal" class="text-gray-400 hover:text-gray-500">
                                    <i data-lucide="x" class="w-5 h-5"></i>
                                </button>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <h4 class="text-sm font-medium text-gray-500 mb-1">基本信息</h4>
                                    <div class="space-y-2 mt-2">
                                        <p><span class="font-medium">公司名称:</span> <span id="modal-company"></span></p>
                                        <p><span class="font-medium">官网:</span> <a id="modal-website" href="#" target="_blank" class="text-blue-600 hover:underline"></a></p>
                                        <p><span class="font-medium">国家/地区:</span> <span id="modal-country"></span></p>
                                        <p><span class="font-medium">行业:</span> <span id="modal-industry"></span></p>
                                        <p><span class="font-medium">公司规模:</span> <span id="modal-size"></span></p>
                                    </div>
                                </div>
                                <div>
                                    <h4 class="text-sm font-medium text-gray-500 mb-1">联系信息</h4>
                                    <div class="space-y-2 mt-2">
                                        <p><span class="font-medium">联系人:</span> <span id="modal-contact"></span></p>
                                        <p><span class="font-medium">职位:</span> <span id="modal-position"></span></p>
                                        <p><span class="font-medium">邮箱:</span> <a id="modal-email" href="#" class="text-blue-600 hover:underline"></a></p>
                                        <p><span class="font-medium">LinkedIn:</span> <a id="modal-linkedin" href="#" target="_blank" class="text-blue-600 hover:underline"></a></p>
                                        <p><span class="font-medium">电话:</span> <span id="modal-phone"></span></p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <h4 class="text-sm font-medium text-gray-500 mb-1">业务信息</h4>
                                <p id="modal-description" class="text-sm mt-2"></p>
                            </div>
                            
                            <div class="mb-6">
                                <h4 class="text-sm font-medium text-gray-500 mb-1">AI相关性分析</h4>
                                <div class="bg-gray-50 p-4 rounded-lg mt-2">
                                    <div class="flex items-center mb-2">
                                        <div class="font-medium mr-2">匹配度:</div>
                                        <div class="w-48 bg-gray-200 rounded-full h-2">
                                            <div id="modal-relevance-bar" class="bg-black h-2 rounded-full" style="width: 75%"></div>
                                        </div>
                                        <div id="modal-relevance-score" class="ml-2 font-medium">75%</div>
                                    </div>
                                    <p id="modal-relevance-analysis" class="text-sm"></p>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-sm font-medium text-gray-500 mb-1">建议接触策略</h4>
                                <div id="modal-strategy" class="text-sm mt-2"></div>
                            </div>
                        </div>
                        <div class="p-6 bg-gray-50 border-t border-gray-200 flex justify-end">
                            <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors mr-2" id="close-detail-modal">关闭</button>
                            <button class="px-4 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors" id="add-to-export">添加到导出列表</button>
                        </div>
                    </div>
                </div>
                
                <div class="flex justify-between mt-8">
                    <button id="startOver" class="px-6 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">重新开始</button>
                    <button id="saveAndExport" class="px-6 py-2 bg-black text-white rounded-md hover:bg-gray-800 transition-colors">保存并导出</button>
                </div>
            </div>
        </div>
        
        <!-- Features -->
        <div class="mb-8">
            <h2 class="text-xl font-bold mb-4">AI智能客群获取的优势</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="flex items-center mb-3">
                        <div class="bg-black rounded-full p-2 mr-3">
                            <i data-lucide="target" class="w-5 h-5 text-white"></i>
                        </div>
                        <h3 class="font-medium">精准定位</h3>
                    </div>
                    <p class="text-sm text-gray-600">基于您的业务特点，精准定位最匹配的潜在客户群体，不再盲目开拓市场</p>
                </div>
                <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="flex items-center mb-3">
                        <div class="bg-black rounded-full p-2 mr-3">
                            <i data-lucide="zap" class="w-5 h-5 text-white"></i>
                        </div>
                        <h3 class="font-medium">高效搜索</h3>
                    </div>
                    <p class="text-sm text-gray-600">AI同时在多平台采集数据，显著提升获客效率，节省手动搜索的时间成本</p>
                </div>
                <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="flex items-center mb-3">
                        <div class="bg-black rounded-full p-2 mr-3">
                            <i data-lucide="brain" class="w-5 h-5 text-white"></i>
                        </div>
                        <h3 class="font-medium">智能分析</h3>
                    </div>
                    <p class="text-sm text-gray-600">自动评估客户相关性和业务匹配度，提供个性化接触策略建议</p>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-50 border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-gray-600">Built with <a href="https://flowith.net" target="_blank" class="underline hover:text-black">Flowith Oracle</a>.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-black">
                        <i data-lucide="help-circle" class="w-5 h-5"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-black">
                        <i data-lucide="mail" class="w-5 h-5"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script src="scripts.js"></script>
    <script>
        // Initialize Lucide icons
        lucide.createIcons();
    </script>
</body>
</html>
